<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .multiline-ellipsis {
      display:-webkit-box;
      -webkit-box-orient:vertical;
      -webkit-line-clamp:4;
      overflow:hidden;
      text-overflow:ellipsis;
    }
    .shadow-triangle{
      width:0;
      height:0;
      border-style:solid;
      border-width:0 50px 50px 50px;
      border-color:transparent transparent rgb(245, 129, 127) transparent;
      filter:drop-shadow(10px 0px 10px rbga(238, 125, 55, .5))
    }

    
  </style>
</head>
<body>
  
  <script>
    // 防抖 未绑定this
    function debounce(fn, delay){
      let timer;
      return function(...args){
        timer && clearTimeout(timer)
        timer = setTimeout(function(){
          fn(); 
        }, delay)
      }
    }

    // 防抖 绑定this
    function debouncethis(fn, delay){
      let timer
      return function(...args){
        let context = this
        timer && clearTimeout(timer)
        
        timer = setTimeout(function(){
          fn.apply(context, args)
        }, delay)
      }
    }


    // 节流
    function throttle(fn, delay){
      let timer 
      return function(...args){
        let context = this
        if(timer) return;
        timer = setTimeout(function(){
          fn.apply(context, args)
          timer = null
        }, delay)
      }
    }

    let t = setTimeout(function(){
      
    })
    console.log(t)
    clearTimeout(t)
    console.log(t)
  </script>
</body>
</html>